<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    button {
      position: absolute;
      bottom: -50px;
    }
    a {
      position: absolute;
      bottom: -50px;
      left: 150px;
    }
  </style>
</head>
<body>
  <div id="app">
    {{num}}
    <div class="container" @click="handleClick1">
      <button @click.stop="handleClick2">点我试试</button>
      <a href="http://www.baidu.com" @click.stop.prevent="handleClick3">百度</a>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handleClick1: function(){
          this.num++
        },
        handleClick2: function(){
          this.num++
        },
        handleClick3: function(){
          this.num++
        }
      }
    });
    // 对.container和button和a标签进行点击事件的监听, 都对num进行加1, 
    // 为什么点击按钮会加2? 如何解决
    // 为什么点击a标签除了会加2,还会跳转? 如何解决
  </script>
</body>
</html>
